<template>
	<view class="content">
		<uni-nav-bar 
		statusBar="true" 
		:fixed="true" 
		backgroundColor="#eff3f7"
		:border="false">
			<view class="tab-nav" slot="middle">
				<view>{{i18n.wall}}</view>
				<!-- <view :class="tabIndex==1?'active':''" @tap.stop="selectTab('1')">{{i18n.power}}</view> -->
			</view>
		</uni-nav-bar>
		<view class="wallet-total animated bounceInLeft fast" style="margin-top: 20upx;">
			<image :src="tabIndex==1?'../../static/imgs/power-bg.png':'../../static/imgs/wallet-bg.png'" mode="widthFix" lazy-load></image>
			<template v-if="tabIndex==0">
				<view class="wall-content animated bounceInLeft fast">
					<view class="wall-content-t">
						{{i18n.TotalAssets}}
					</view>
					<view class="wall-content-c">
						{{total}} <text>USD</text>
					</view>
					<view class="wall-content-b">
						$ {{total}}
					</view>
				</view>
			</template>
			
			<template v-if="tabIndex==1">
				<view class="power-list animated bounceInLeft fast">
					<view class="exchange-btn">
						<view hover-class="active" @tap.stop="exchange">
							{{i18n.f_exchange}}
						</view>
					</view>
					<!-- <view class="Group-btn">
						<view hover-class="active" @tap.stop="group">
							{{i18n.Group}}
						</view>
					</view> -->
					<view class="power-list-top">
						<view class="items">
							<text> {{i18n.TotalRevenue}} </text>
							<view class="">
								{{zsy}}  USD
							</view>
						</view>
						<view class="items">
							<text> {{i18n.DayIncome}} </text>
							<view class="">
								{{day_sy}}  USD
							</view>
						</view>
					</view>
					<view class="power-list-bottom">
						<view class="items">
							{{i18n.ThisRoundOfInvestment}}
							<!-- 最大算力值 -->
							: <text>{{max_sl}} USD</text>
						</view>
						<view class="items">
							{{i18n.RevenueThisRound}}
							<!-- 当日算力收益 -->
							: <text>{{day_sl}} USD</text>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
			<!-- 	<index-list 
				:item="item" 
				:index="index" 
				@jump-receive="jumpReceive"
				@jump-turn="jumpTurn"
				@jump-history="jumpHistory"
				@jump-flash="jumpFlash"
				@click-dump="clickDump"></index-list> -->
				<view class="list-item animated bounceInUp fast" @tap="clickDump(index)">
					<view class="list-item-top">
						<view class="item-l">
							<image :src="item.logo" mode="widthFix" lazy-load></image>
							<view class="items">
								<view class="">
									{{item.title_en}}
								</view>
								<text>{{item.title_zh}}</text>
							</view>
						</view>
					<!-- 	<view class="item-l">
							<view class="items">
							<view>{{item.giving}}</view>
							<text>{{i18n.Lock_up}}</text>
							</view>
						</view> -->
						<view class="item-c" :style="{textAlign:(item.zdfisshow?'center !important':'right !important')}">
							<view class="">
								{{item.balance}}
							</view>
							<view>{{i18n.Lock_up}} {{item.giving}}</view>
							<text>≈ $ {{item.usd_price}}</text>
						</view>
						<template v-if="item.zdfisshow">
							<view class="item-r">
								<view  :class="item.type?'green':'red'">
									{{item.type?'+':'-'}}{{item.zdf}}
								</view>
							</view>
						</template>
						
					</view>
					<view class="list-item-bottom" :class="item.show?'anima':''">
						<view class="list-item-bottoms">
							<view class="list-item-bottom-i" @tap.stop="jumpReceive(index)">
								<image src="../../static/imgs/receive.png" mode="widthFix" lazy-load></image>
								<text>{{i18n.recharge}}</text>
							</view>
							<view class="list-item-bottom-i" @tap.stop="jumpTurn(index)">
								<image src="../../static/imgs/turn.png" mode="widthFix" lazy-load></image>
								<text>{{i18n.withdrawal}}</text>
							</view>
							<view class="list-item-bottom-i" @tap.stop="jumpFlash(index)" v-if="item.token_id==1">
								<image src="../../static/imgs/exchange.png" mode="widthFix" lazy-load></image>
								<text>{{i18n.f_exchange}}</text>
							</view>
							<view class="list-item-bottom-i" @tap.stop="jumpHistory(index)">
								<image src="../../static/imgs/history.png" mode="widthFix" lazy-load></image>
								<text>{{i18n.bili}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import indexList from "../../components/common/index-list.vue"
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,
			indexList,
			Load
		},
		data() {
			return {
				day_sl:0,
				day_sy:0,
				max_sl:0,
				zsy:0,
				showLoad:false,
				tabIndex:0,
				list:[],
				total:''
			};
		},
		onShow(){
			this.getWallList();
			forceUpdate(this.getLangType);
		},
		methods:{
			group(){
				uni.navigateTo({
					url:'/pages/group/group'
				})
			},
			getSlMes(){
				let url = this.getRequestUrl + '/api/shop/sl'
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				fetch(url,data,'POST').then(res=>{
					// console.log(res);
					if(res.data.code ==1){
					let	{day_sl,day_sy,max_sl,zsy} = res.data.data;
						this.day_sl = day_sl
						this.day_sy = day_sy
						this.max_sl = max_sl
						this.zsy = zsy
					}
				})
			},
			jumpFlash(){
				uni.navigateTo({
					url:'/pages/exchange/exchange'
				})
			},
			exchange(){
				uni.navigateTo({
					url:'/pages/exchange/exchange'
				})
			},
			getWallList(){
				let _url = this.getRequestUrl+'/api/wallet/wallet_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				// uni.showLoading()
				this.showLoad = true;
				let result = fetch(_url, data, "POST");
				result.then(res=>{
					// uni.hideLoading()
					this.showLoad = false;
					if(res.data.code==1){
						this.list = res.data.data.list;
						this.total = res.data.data.total_usd;
						this.list.forEach((item,index)=>{
							this.list[index].type = (item.zdf>=0?true:false)
							this.list[index].zdfisshow = false;
							item.zdf = (item.zdf*100)+'%'
						})
						console.log(this.list);
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoad = false;
					console.log(err)
				})
			},
			selectTab(index){
				this.tabIndex = index;
				if(index==1){
					this.getSlMes()
				}else{
					this.getWallList()
				}
			},
			clickDump(index){			
				for	(let i = 0; i < this.list.length; i++){
					// console.log(123456)
					if (index === i && !this.list[i].show) {
						if(this.list[index].id==10){
							this.list[i].show = false
							this.list[i].border = 0;
							this.list[i].height = '0px'
							this.$set(this.list, i, this.list[i])
						}else{
							this.list[i].show = !this.list[i].show
							this.list[i].show = true
							this.list[i].border = this.list[i].show ? '1px solid #E2E2E2 !important' : '0px'
							this.list[i].height = uni.upx2px(this.list[i].show ? 144 : 0) + 'px'
							this.$set(this.list, i, this.list[i])
						}
					} else {
						this.list[i].show = false
						this.list[i].border = 0;
						this.list[i].height = '0px'
						this.$set(this.list, i, this.list[i])
					}
				}
			},
			jumpReceive(index){
				let item = JSON.stringify(this.list[index]);
				uni.navigateTo({
					url:`/pages/recharge/recharge?item=${item}`
				})
			},
			jumpTurn(index){
				let item = JSON.stringify(this.list[index]);
				uni.navigateTo({
					url:`/pages/coin/coin?item=${item}`
				})
			},
			jumpHistory(index){
				let tokenId = this.list[index].token_id;
				uni.navigateTo({
					url:`/pages/wallet/history?item=${JSON.stringify(this.list[index])}`
				})
			}
		}
	}
</script>
<style>
	page{
		background: #eff3f7;
	}
</style>
<style lang="scss" scoped>
	@-webkit-keyframes test-animation {
	  0% { 
		  border-top:none;
		  height: 0;
		  opacity: 1;
		  }
	  100% { 
		  border-top:1upx solid #CACACA;
		  height: 100upx;
		  margin-top: 38upx;
		  padding-top: 38upx;
		  display: block !important;
		  }
	}
	@keyframes test-animation {
	  0% {
	  	  border-top:none;
	  	  height: 0;
	  	  opacity: 0;
	  	  }
	  100% { 
	  	  border-top:1upx solid #CACACA;
	  	  height: 110upx;
		  margin-top: 38upx;
		  padding-top: 38upx;
		  display: block !important;
	  	  }
	} 
	.list-item{
		padding:38upx 30upx;
		background-color: #FFFFFF;
		border-radius:10upx;
		margin-bottom: 30upx;
		.list-item-top{
			display: flex;
			justify-content: space-between;
			.item-l{
				display: flex;
				image{
					width: 75upx;
					height: 75upx;
					background-color: #FFFFFF;
					border-radius:50%;
					flex-shrink: 0;
				}
				.items{
					flex: 1;
					margin-left:29upx;
					view{
						font-size: 30upx;
						color: #000000;
						font-weight: bold;
					}
					text{
						font-size: 24upx;
						color: #757575;
					}
				}
			}
			.item-c{
				flex: 1;
				text-align: center;
				view{
					font-size: 30upx;
					color: #000000;
				}
				text{
					font-size: 24upx;
					color: #757575;
				}
			}
			.item-r{
				display: flex;
				justify-content: center;
				align-items: center;
				.green{
					color: #57B567;
				}
				.red{
					color: #FF5D5D;
				}
			}
		}
		.list-item-bottom{
			height: 0;
			overflow: hidden;
			&.anima{
				animation: test-animation 1s linear 0s 1 forwards;
			}
			.list-item-bottoms{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list-item-bottom-i{
					flex: 1;
					text-align: center;
					image{
						width: 52upx;
						height: 52upx;
						border-radius:50%;
						flex-shrink: 0;
					}
					text{
						display: block;
						font-size:24upx;
						color: #2a2a2a;
						margin-top: 13upx;
					}
				}
			}
		}
	}
	.content{
		padding:0 30upx;
		.tab-nav{
			padding: 0 30upx;
			view{
				flex: 1;
				// text-align: center;
				font-weight: bold;
				&.active{
					color: #1D7DFF;
					position: relative;
					&::after{
						position: absolute;
						content: '';
						width: 72upx;
						height: 5upx;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						background-color: #1D7DFF;
					}
				}
			}
		}
		.wallet-total{
			position: relative;
			image{
				position: absolute;
				width: 100%;
				height: auto;
				z-index: -1;
				border-radius:10upx;
				left: 0;
				top: 0;
			}
			.power-list{
				// background-color: #FFFFFF;
				border-radius:10upx;
				padding:0 24upx 82upx;
				margin-bottom: 30upx;
				// padding: 58upx 0 127upx;
				position: relative;
				.exchange-btn{
					position: absolute;
					right:30upx;
					top: 30upx;
					view{
						width: 100upx;
						line-height: 60upx;
						font-size:26upx;
						border:2upx solid #FFFFFF;
						text-align: center;
						color: #FFFFFF;
						border-radius: 10upx;
						&.active{
							background-color: #ffb01a;
							border:none;
						}
					}
				}
				.Group-btn{
					position: absolute;
					right:30upx;
					top: 100upx;
					view{
						width: 100upx;
						line-height: 60upx;
						font-size:26upx;
						border:2upx solid #FFFFFF;
						text-align: center;
						color: #FFFFFF;
						border-radius: 10upx;
						&.active{
							background-color: #ffb01a;
							border:none;
						}
					}
				}
				.power-list-top{
					padding: 39upx 0;
					border-bottom: 2upx dashed #CACACA;
					display: flex;
					.items{
						flex: 1;
						text{
							font-size:25upx;
							color: #fff;
						}
						view{
							margin-top: 34upx;
							font-size: 30upx;
							font-weight: bold;
							color: #fff;
						}
						&:last-child{
							// text-align: center;
						}
					}
				}
				.power-list-bottom{
					display: flex;
					.items{
						flex: 1;
						line-height: 102upx;
						font-size:24upx;
						color: #fff;
						text{
							color:#fff;
						}
					}
				}
			}
			.wall-content{
				padding: 58upx 0 127upx;
				text-align: center;
				color: #FFFFFF;
				.wall-content-t{
					font-size:33upx;
					margin-bottom: 48upx;
					font-weight: bold;
				}
				.wall-content-c{
					font-size: 43upx;
					margin-bottom: 33upx;
					font-weight: bold;
					text{
						font-size: 22upx;
						margin-left: 10upx;
					}
				}
				.wall-content-b{
					font-weight: bold;
					color: #a2e0ff;
					font-size: 28upx;
				}
			}
		}
		
	}
	
</style>
